<template>
  <div class="fenlei">
    <!-- 搜索框 -->
    <div class="search">
      <van-search
        class="van-search"
        v-model="value"
        placeholder="请输入搜索关键词"
      />
      <van-icon class="van-icon" name="comment" />
    </div>
    <!--  -->
    <!-- 侧边分类 -->
    <div class="box">
      <van-sidebar v-model="activeKey" @change="oncahng" class="leftside">
        <van-sidebar-item
          :title="item.name"
          v-for="item in menus"
          :key="item._id"
        />
      </van-sidebar>
      <div class="rightside">
        <ul>
          <li
            v-for="items in products"
            :key="items._id"
            @click="godetail(items._id)"
          >
            <img :src="items.coverImg" alt="" />
            <p class="textfont">{{ items.name }}</p>
          </li>
        </ul>
      </div>
    </div>
    <!--  -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  components: {},
  data() {
    return {
      value: "",
      title: "",
      activeKey: 0,
      products: [],
      list: [],
      menus: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    //获取分类列表
    async getmenus() {
      const result = await axios.get(
        "http://localhost:3009/api/v1/product_categories"
      );
      this.menus = result.data.categories;
      //初始化展示数据
      const ress = await axios.get(
        "http://localhost:3009/api/v1/products?name=" + this.menus[0].name
      );
      this.products = ress.data.products;
    },
    async oncahng(title) {
      const result = await axios.get(
        "http://localhost:3009/api/v1/products?name=" + this.menus[title].name
      );
      this.products = result.data.products;
      console.log(result);
      console.log(this.products);
    },
    //跳转详情页
    godetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
  created() {
    this.getmenus();
  },
  mounted() {},
};
</script>

<style scoped>
.search {
  /* position: fixed; */
  display: flex;
  padding: 2%;
  justify-content: space-between;
}
.van-search {
  width: 90%;
}
.van-icon {
  padding-top: 5%;
  padding-right: 3%;
}
.asideleft {
  text-align: center;
  /* position: fixed; */
}
.liproduct {
  background: pink;
  width: 100%;
  height: 100%;
}
ul {
  width: 200px;
  height: 300px;
  /* background: red; */
}
.box {
  width: 100%;
  height: 100%;
  /* display: flex;
  justify-content: space-between; */
}
.leftside {
  width: 20%;
  height: 100%;
  float: left;
}
.rightside {
  float: left;
  width: 80%;
  height: 100%;
  overflow: hidden;
}
.rightside li img {
  width: 80px;
}
.rightside ul {
  width: 100%;
  height: 100%;
}
.rightside li {
  width: 100px;
  height: 130px;
  font-size: 10px;
  text-align: center;
  float: left;
  /* background: lightcoral; */
  margin: 10px;
  padding-left: 15px;
  overflow: hidden;
}
.rightside .textfont {
  line-height: 15px;
}
</style>
